import React, { useState } from 'react';
import { TextField, Box } from '@mui/material';
import { FolderOpen as FolderOpenIcon } from '@mui/icons-material';
import ActionDialog from './ActionDialog';
import Tooltip from '../../general/Tooltip';
import FileBrowser from '../../general/FileBrowser';

interface LoadFileIndexDialogProps {
  open?: boolean;
  onRequestClose?: () => void;
  [key: string]: any;
}

/**
 * LoadFileIndexDialog Component
 * Dialog for loading model from index file (.npjson)
 * Similar to LoadFileDialog but specifically for index files
 */
const LoadFileIndexDialog: React.FC<LoadFileIndexDialogProps> = ({
  open = false,
  onRequestClose,
  ...otherProps
}) => {
  const [jsonModelFolder, setJsonModelFolder] = useState('');
  const [jsonPath, setJsonPath] = useState('');
  const [explorerDialogOpen, setExplorerDialogOpen] = useState(false);
  const [explorerParameter, setExplorerParameter] = useState('');
  const [exploreOnlyDirs, setExploreOnlyDirs] = useState(false);

  const showExplorerDialog = (param: string, onlyDirs: boolean): void => {
    setExplorerDialogOpen(true);
    setExplorerParameter(param);
    setExploreOnlyDirs(onlyDirs);
  };

  const closeExplorerDialog = (fieldValue?: any): void => {
    setExplorerDialogOpen(false);
    if (fieldValue) {
      const fileName = fieldValue.path.replace(/^.*[\\/]/, '');
      const path = fieldValue.path.split(fileName).slice(0, -1).join('');
      
      if (explorerParameter === 'jsonModelFolder') {
        setJsonModelFolder(fieldValue.path);
        setJsonPath(path);
      }
    }
  };

  // Form validation - simplified for index files
  const isFormValid = (): boolean => {
    return jsonModelFolder !== '';
  };

  return (
    <>
      <ActionDialog
        title="Open INDEX file"
        buttonLabel="Load"
        message="LOADING FILE"
        isFormValid={isFormValid}
        command="netpyne_geppetto.loadFromIndexFile"
        args={{
          jsonModelFolder,
          jsonPath,
        }}
        open={open}
        onRequestClose={onRequestClose}
        {...otherProps}
      >
        <Box display="flex" alignItems="center">
          <Tooltip title="File explorer" placement="top">
            <FolderOpenIcon
              sx={{
                cursor: 'pointer',
                mr: 1,
                '&:hover': { opacity: 0.7 },
              }}
              onClick={() => showExplorerDialog('jsonModelFolder', false)}
            />
          </Tooltip>
          <TextField
            fullWidth
            variant="filled"
            label="INDEX file"
            value={jsonModelFolder}
            onChange={(e) => setJsonModelFolder(e.target.value)}
            helperText={jsonPath !== '' ? `path: ${jsonPath}` : ''}
            sx={{
              '& .MuiFilledInput-root': {
                '&::before': {
                  display: 'none',
                },
              },
            }}
          />
        </Box>
      </ActionDialog>

      <FileBrowser
        open={explorerDialogOpen}
        exploreOnlyDirs={exploreOnlyDirs}
        filterFiles=".npjson"
        onRequestClose={closeExplorerDialog}
      />
    </>
  );
};

export default LoadFileIndexDialog;

